<template>
  <div class="model-appraisal">
    <div class="title">模型考核</div>
    <div class="content">
      <div class="inner">
        <div class="search">
          <span>考核年份：</span>
          <el-date-picker
            v-model="state.form.year"
            format="YYYY"
            value-format="YYYY"
            type="year"
            clearable
            placeholder="选择年份"
            @change="handleYear"
          />
          <span>考核月份：</span>
          <el-select placeholder="请选择考核月份" v-model="state.form.month" clearable>
            <el-option
              v-for="(item, index) in state.monthArr"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="ml10">模型类型：</span>
          <el-cascader
            v-model="state.form.modelType"
            :options="modelTypeData"
            placeholder="模型类型"
            clearable
            :props="{ value: 'typeId', label: 'typeName', children: 'types' }"
            @change="handleCascaderChange"
          >
            <template #prefix>
              <span style="padding-left: 5px" class="select-bg"> </span>
            </template>
          </el-cascader>
          <span class="ml10">模型名称：</span>
          <el-select v-model="state.form.modelName" placeholder="选择模型">
            <el-option
              v-for="item in state.modelNameArr"
              :key="item.id"
              :label="item.modelName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-button type="primary" class="ml10" @click="handleSearchData">
            <el-icon class="el-icon--left">
              <Search />
            </el-icon>
            查询
          </el-button>
        </div>
        <el-tabs
          class="tabs"
          v-model="activeTab"
          type="border-card"
          stretch
          @tab-change="handleChangeTabs"
        >
          <el-tab-pane label="模型稳定" name="stable" :lazy="true">
            <model-stable :data="state.propsData" />
          </el-tab-pane>
          <el-tab-pane label="模型计算效率" name="efficiency" :lazy="true">
            <model-efficiency :data="state.propsData" />
          </el-tab-pane>
          <!-- <el-tab-pane label="模型精准度" name="precision" :lazy="true">
            <model-precision />
          </el-tab-pane> -->
          <el-tab-pane label="模型评分" name="rate" :lazy="true">
            <model-rate :data="state.propsData" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import ModelStable from './cpns/ModelStable/Index.vue'
import ModelEfficiency from './cpns/ModelEfficiency/Index.vue'
import ModelPrecision from './cpns/ModelPrecision/Index.vue'
import ModelRate from './cpns/ModelRate/Index.vue'
//bus
import emitter from '@/utils/bus'
//接口
// getModelList查询模型列表
import { getModelType, getModelList } from '@/services/modules/home'

const activeTab = ref('stable')
// 模型类型data
const modelTypeData = ref([])
const data = new Date()
const state = reactive({
  propsData: {},
  stableFlag: true,
  efficiencyFlag: false,
  rateFlag: false,
  form: {
    year: new Date().getFullYear() + '',
    month: new Date().getMonth() + 1,
    modelType: [undefined, 1],
    modelName: '时空变源'
  },
  monthArr: [
    { label: '1月', value: 1 },
    { label: '2月', value: 2 },
    { label: '3月', value: 3 },
    { label: '4月', value: 4 },
    { label: '5月', value: 5 },
    { label: '6月', value: 6 },
    { label: '7月', value: 7 },
    { label: '8月', value: 8 },
    { label: '9月', value: 9 },
    { label: '10月', value: 10 },
    { label: '11月', value: 11 },
    { label: '12月', value: 12 }
  ],
  modelNameArr: []
})
onMounted(() => {
  initData()
  // var date = new Date()
  // console.log(date.getMonth() + 1)
})
function handleYear(y) {
  console.log(y, state.form.year, '年份')
}
// /**
//  *   切换tab
//  */
const handleChangeTabs = (item) => {
  // handleSearchData()
}
// 点击模型类型 获取模型列表
function handleCascaderChange(val) {
  state.form.modelName = ''
  console.log(val, 999)
  getModelList({ typeId: val[1] }).then((res) => {
    state.modelNameArr = res.data
    state.form.modelName = res.data[0].id
    console.log(state.form.modelName, state.form.modelType, 555563)
    // 查询模型
    handleSearchData()
  })
}
//模型类型
function initData() {
  return new Promise((resolve, reject) => {
    getModelType().then((res) => {
      if (res.code === 200) {
        modelTypeData.value = JSON.parse(
          JSON.stringify(res.data).replace(/"specialName"/g, '"typeName"')
        )
        // 默认点击模型类型获取模型列表
        handleCascaderChange([undefined, 1])
      }
    })
  })
}
//查询
function handleSearchData() {
  let modelType
  if (state.form.modelType?.length) {
    modelType = state.form.modelType[state.form.modelType.length - 1]
  } else {
    modelType = ''
  }
  state.propsData = { ...state.form, modelType: modelType }
  // emitter.emit('searchData', { ...state.form, modelType: modelType })
  // console.log(state.form, 8888)
}
</script>

<style lang="less" scoped>
.model-appraisal {
  height: 100%;
  box-sizing: border-box;
  background-color: white;
  .short-input {
    width: 200px;
  }
  .title {
    display: flex;
    align-items: center;
    height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid var(--border-primary);
    font-size: var(--header-fontsize);
    font-weight: 700;
    box-sizing: border-box;
  }

  .content {
    height: calc(100% - 50px);
    padding: 10px;
    box-sizing: border-box;

    .inner {
      height: 100%;
      border: 1px solid var(--border-primary);
      border-radius: 10px;
      box-sizing: border-box;

      .search {
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0 10px;
      }

      .tabs {
        height: calc(100% - 70px);
        margin: 0 10px;
        :deep(.el-tabs__content) {
          height: calc(100% - 55px);
        }

        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
}
</style>
